<template>
  <el-card @mouseover.prevent="show = true" @mouseout.prevent="show = false" :body-style="{ padding: '0px' }">
    <img :src="good.img" @load="$emit('load-image')" class="image" alt="good">
    <div :class="show ? 'back-op': ''" style="padding: 12px">
      <span>{{ good.name }}</span>
      <div class="bottom">
        <span class="price">
          <span>￥</span>
          <span>{{ good.price.toFixed(2) }}</span>
        </span>
      </div>
    </div>

    <div v-show="show" class="add">
      <el-button
          class="add-btn"
          size="mini"
          icon="el-icon-plus"
          round
          plain
          @click="addToCart(good)"
      >添加到购物车
      </el-button>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'NecessityGoodCard',
  props: ['good'],
  data: () => ({
    show: false
  }),
  methods: {
    addToCart(good) {
      this.$store.commit('addNecessityGoodToCart', good);
    }
  }
}
</script>

<style lang="less" scoped>
@import "../../assets/less/common";

.image {
  width: 100%;
  height: 100%;
}

.des {
  font-size: 14px;
  color: rgb(102, 102, 102);
}

.add {
  display: flex;
  justify-content: center;
  transform: translateY(-52px);
  width: 100%;
  height: 0;

  .add-btn:hover, .add-btn:focus {
    color: @theme-color;
    border-color: @theme-color;
  }
}

.back-op {
  opacity: 0.2;
  transition: opacity .5s;
}

.bottom {
  margin-top: 8px;

  .price {
    color: @theme-color;
    font-weight: bold;

    span:nth-child(1) {
      font-size: 12px;
    }

    span:nth-child(2) {
      font-size: 20px;
    }
  }
}
</style>
